<template>
  <div id="app">
    <div id="nav">
      <!-- 声明式跳转
        默认渲染为 a herf
        可以通过tag 更改生成的目标标签
        选中的可以有默认的选中样式 router-link-exact-active router-link-active
       -->
      <router-link tag="button" to="/">Home</router-link> |
      <router-link tag="button" to="/about">About</router-link>
      <!-- 编程式跳转 -->
      <!-- <button @click="changePage('/')">Home</button>
      <button @click="changePage('/about')">About</button> -->
    </div>
    <router-view/>
  </div>
</template>
<script>
export default {
  methods: {
    changePage (path) {
      // 编程式跳转
      // 路由其实可以看作是一个数组，数组的元素就是每一次操作的每一个路由
      // push一次，相当于给数组的最后面添加了一个元素，指针指向新添加的最后一个元素
      // replace一次，相当于替换了数组的最后一个元素，指针的位置并没有发生改变
      // back一次，相当于删掉了最后一个元素（不是真的删除），指针指向了倒数第二个元素
      // go一次，可以传入number类型的数字，值为正数，表示前进几步，值为负数，相当于后退几步
      this.$router.push(path)
    }
  }
}
</script>
<style lang="stylus">
#app
  font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin-top 60px
</style>
